<template>
    <div>
        <el-tabs v-model="active" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="客户余额不足提醒" name="lackOfMoney">
                <filterComponent @dateChange="handleDateChange" :startTime="lackOfMoneyDate.startTime" :endTime="lackOfMoneyDate.endTime"/>
            </el-tab-pane>
            <el-tab-pane label="月度每日统计" name="dayPerMonth">
                <filterComponent filterType="dayPerMonth" @dateChange="handleDateChange" :startTime="dayPerMonthDate.startTime" :endTime="dayPerMonthDate.endTime"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import filterComponent from './filterComponent.vue'
const active = ref('')
const props = defineProps({
    cur: {
        type: String,
        default: 'lackOfMoney'
    },
    lackOfMoneyDate: {
        type: Object
    },
    dayPerMonthDate: {
        type: Object
    }
})

const emits = defineEmits(['update:cur', 'dateChange'])

watch(() => props.cur, (newval) => {
    active.value = newval
}, {
    immediate: true
})

const handleClick = (ev) => {
    console.log(111, ev.paneName)
    emits('update:cur', ev.paneName)
}

const handleDateChange = (ev) => {
    emits('dateChange', ev)
}

</script>
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap) {
    padding: 0 !important;
}
</style>